<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>UAV</title>
    <link rel="icon" href="../../favicon.ico">
    <style>
        body {
            align-items: flex-start;
            justify-content: center;
            display: flex;
            flex-direction: column;
            background-color: #000000;
        }

        #title {
            color: #cecece;
            font-size: 1.5rem;
            width: 90%;
            display: block;
            padding: 0.5rem;
            font-weight: bold;
        }

        .container {
            display: flex;
            flex-direction: column;
            width: 96%;
            left: 1%;
            color: #cecece;
            background-color: rgba(255, 255, 255, 0.1);
            margin: 1%;
            padding: 1%;
        }

        .itemContainer {
            width: 100%;
            display: flex;
            flex-direction: row;
        }

        .item {
            width: 6rem;
            height: 3rem;
            background-color: rgba(255, 255, 255, 0.2);
            font-size: 1.4rem;
            font-weight: bold;
            color: #cecece;
        }

        .image {
            margin-left: 2rem;
            object-fit: contain;
            max-width: min-content;
            margin-bottom: 1rem;
            margin-top: 1rem;
            border-radius: 0.5rem;
        }
    </style>
</head>

<body>
    <div id="title">
        <h1>操作说明-关卡1</h1>
        关卡1相关的操作说明，以及关卡内必要的讲解。
    </div>

    <div class="container">
        <div class="itemContainer">
            <button id="nextSection" class="item">下一节</button>
        </div>
    </div>

    <div class="container">
        <img class="image" src="./assets/images/doc1.jpg">
        进入场景时的画面如上。本关卡为“搜寻与歼灭”，总计10名敌人。任务目标为阻止敌军突破，即在战区内全歼敌军。
        <img class="image" src="./assets/images/doc11.jpg">
        敌人位于默认画面前方（如上），迎面而来。
        <img class="image" src="./assets/images/doc3.jpg">
        敌人会向着目标方向前行，当推进到上图所示位置（大概位于进入场景时你所处的位置），该敌人即成功突破并进入战区外，任何对其的攻击都失效，
        而任务亦失败，不过此时你仍可以继续攻击其他尚未突破的敌人。
        <img class="image" src="./assets/images/doc2.jpg">
        上图所示图标为无人机电量，开始游戏时的电量能够维持10分钟飞行，所以你必须在10分钟内完成任务，如果电量耗尽，即为任务失败，将终止游戏。
    </div>

    <script src="./assets/index.js"></script>

</body>

</html>